<template>
	<view>
		<view class="header">
			<u-navbar
				:background="{ backgroundColor: '#3478F2' }"
				back-icon-color="#fff"
				back-icon-name="arrow-left"
				back-icon-size="40"
				title="联系客服"
				title-color="#fff"
				title-size="40"
				title-bold
			></u-navbar>
		</view>
		<scroll-view scroll-top="0" scroll-y="true" :style="`height:${scrollHeight}px`">
			<view class="page">
				<u-notice-bar mode="horizontal" :list="list" :volume-icon="false" class="tip" font-size="14px"></u-notice-bar>
				<u-field
					v-model="content"
					type="textarea"
					placeholder="请输入您的问题"
					border
					:clearable="false"
					maxlength="500"
					label-width="0"
					border-color="#d7d7d7"
					class="Ipt"
				></u-field>
				<u-button type="primary" size="small" @click="open" class="Btn">提交</u-button>
				<image src="/static/icon/touxiang.png" mode="scaleToFill" class="Img" />
				<uni-popup ref="popup" type="center">
					<view class="pop">
						<image src="/static/service/xiao_xi.png" class="pop_img" />
						<view class="pop_text">为回复可及时通知，请留下您的联系方式</view>
						<view>
							<u-input placeholder="请输入您的手机号" :border="true" maxlength="11" :clearable="false" type="number" v-model="phone" class="pop_ipt"></u-input>
						</view>
						<view>
							<button class="pop_conform" @click="commit">确定</button>
						</view>
						<view class="pop_out" @click="close">
							<u-icon name="close" color="#ffffff" size="40"></u-icon>
						</view>
					</view>
				</uni-popup>
			</view>
		</scroll-view>
	</view>
</template>
<script>
import ajax from '@/api'
import { mixin } from '@/utils/mixins'
export default {
	mixins: [mixin],
	data() {
		return {
			content: '',
			phone: '',
			show: false,
			list: ['请填写留言信息，我们将会在一个工作日内回复您!']
		}
	},
	methods: {
		open() {
			if (this.value1 == '') {
				uni.showToast({
					title: '请输入你想描述的问题',
					icon: 'none'
				})
				return
			}
			this.$refs.popup.open()
		},
		close() {
			this.$refs.popup.close()
		},
		async commit() {
			if (!this.$u.test.mobile(this.phone)) {
				uni.showToast({
					title: '请输入合法手机号',
					icon: 'none'
				})
				return
			}
			try {
				await ajax.leaveMessage({ phone: this.phone, des: this.contetn })
				this.$refs.popup.close()
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 800)
			} catch (error) {
				this.$refs.popup.close()
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.page {
	height: 100%;
	position: relative;
	padding: 32rpx;
	background-color: #f5f6fa;
}
.tip {
	box-sizing: border-box;
	margin: 0 auto;
	width: 686rpx;
	height: 60rpx;
	line-height: 16px;
}
.Ipt {
	width: 686rpx;
	margin: 0 auto;
	margin-top: 50rpx;
	min-height: 286rpx;
	border-radius: 16rpx;
	padding-top: 24rpx;
	text-indent: 88rpx;
	background-color: #fff;
}
.Btn {
	margin-top: 240rpx;
	width: 688rpx;
	height: 92rpx;
	font-size: 36rpx;
	border-radius: 70rpx;
	background: linear-gradient(270deg, #0481fe 0%, #40c5fe 100%);
}
.Img {
	width: 88rpx;
	height: 88rpx;
	position: absolute;
	top: 125rpx;
	left: 50rpx;
}
.pop {
	width: 606rpx;
	height: 642rpx;
	border-radius: 16rpx;
	background-color: #ffffff;
	position: relative;
	.pop_img {
		width: 161rpx;
		height: 157rpx;
		margin-top: 60rpx;
		margin-left: 222rpx;
	}
	.pop_text {
		width: 448rpx;
		margin: 0 auto;
		font-size: 32rpx;
		text-align: center;
		margin-top: 40rpx;
	}
	.pop_ipt {
		display: block;
		box-sizing: border-box;
		margin: 0 auto;
		width: 448rpx;
		height: 80rpx;
		line-height: 40px;
		margin-top: 24rpx;
		padding-top: 10rpx;
	}
	.pop_conform {
		margin-top: 40rpx;
		width: 448rpx;
		height: 92rpx;
		background-color: #3478f2;
		font-size: 18px;
		color: #ffffff;
		border-radius: 16rpx;
	}
	.pop_out {
		position: absolute;
		width: 64rpx;
		height: 64rpx;
		top: -84rpx;
		right: -20rpx;
	}
}
</style>
